<template>
    <span v-if="!store.isLoggedIn">
        <button @click="login" class="auth-section">登录</button>
        <button @click="register" class="auth-section">注册</button>
    </span>
  <div class="user-info" v-else>
    <div class="user-info-meta" @click="toggleMenu">
      <img :src="user?.avatar || 'https://picsum.photos/35/35/?random=1'" alt="avatar" class="login-avatar">
      <a href="javascript:;" class="login-username">{{ user?.nickname || store.username }}
        <i class="fa fa-angle-down" :class="{ 'fa-angle-up': showMenu }" @click="closeMenu"></i>
      </a>
      <dl class="login-menu" v-show="showMenu">
        <dd><a @click.stop="goToPersonalCenter">个人中心</a></dd>
        <dd><a @click.stop="goToPersonalArticle">文章管理</a></dd>
        <dd><a @click.stop="goToSystemNotice">通知中心</a></dd>
        <dd><a @click.stop="logout">退出登录</a></dd>
      </dl>
    </div>
  </div>
</template>


<script setup>
import {useUserStore} from '@/stores/userStore'

const store = useUserStore();
const router = useRouter();
const showMenu = ref(false);
const user = ref(null);


const getUserData = async () => {
  try {
    const response = await axios.get('/api/accounts/auth/get_user_info_by_username/',
        {params: {username: store.username,email: store.email,qq: store.qq,phone: store.phone},requiresAuth: true });
    user.value = response.data;
  } catch (error) {
    console.log(error);
  }
};
// 修改生命周期钩子和监听逻辑
onBeforeMount(() => {
  store.checkLoginStatus();
  // 立即检查登录状态并获取用户数据
  if (store.isLoggedIn) {
    getUserData();
  }
});


watch(() => store.isLoggedIn, (newVal) => {
  if (newVal) {
    getUserData();
  } else {
    user.value = null;
  }
});

const toggleMenu = () => {
  showMenu.value = !showMenu.value;
};

const closeMenu = () => {
  showMenu.value = false;
};

// 登录逻辑,跳转到登录页面
const login = () => {
  router.push('/login')
}

// 注册逻辑
const register = () => {
  router.push('/register')
}

// 注销方法
const logout = () => {
  store.logout();
  router.push('/');
}

// 跳转到个人中心
const goToPersonalCenter = () => {
  router.push('/personal');
  // 如果你希望点击后菜单自动关闭，可以在这里调用 toggleMenu
  toggleMenu();
}
// 跳转到个人文章
const goToPersonalArticle = () => {
  router.push('/admin-articles');
  toggleMenu();
}
// 跳转到系统通知
const goToSystemNotice = () => {
  router.push('/notification');
  toggleMenu();
}

</script>

<style scoped>
.auth-section {
  padding: 6px 10px;
  margin-left: 2px;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
}

.auth-section:hover {
  background-color: #18a2b8;
  border-color: #18a2b8;
}

.user-info {
  display: inline-block;
  margin-left: 15px;
}
.user-info-meta {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.login-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 5px;
}

.login-username {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.login-menu {
  position: absolute;
  top: 60px;
  background-color: #2b3d4e;
  border: 1px solid #ffffff;
  border-radius: 4px;
  margin-right: 10px;
  padding: 5px 0;
  font-size: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10; /* 确保显示在最前 */
}


.login-menu dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.login-menu dd a {
  display: block;
  padding: 5px 10px;
  color: #ffffff;
  text-decoration: none;
}

.login-menu dd a:hover {
  background-color: #18a2b8;
}
</style>
